<template>
  <div class="content">
    <div class="flex flex-horizontal-between">
      <h3>奖金参数设置</h3>
      <Button type="primary">
        <a href="https://images.tospurfang.com/doc/%E5%A5%96%E9%87%91%E5%8F%82%E6%95%B0%E6%93%8D%E4%BD%9C%E6%8C%87%E5%BC%95.pdf"
          target="_blank" style="color:#fff;">
          查看操作指引
        </a>
      </Button>
    </div>
    <p class="operator">
      <span>最近修改日期：{{ info.updateTime || '--' }}</span>
      <span>操作人：{{ info.updateName || '--' }}</span>
    </p>
    
    <template v-for="item in list">
      <params-item :key="item.key" :data="item" :detail="info" />
    </template>
    
    <div style="height: 60px;"></div>
    <div class="bottom">
      <Button type="primary" @click="onSave">保存</Button>
      <Button type="primary" ghost @click="onConfig" v-if="unlocking('0112040301')">奖金参数配置</Button>
    </div>
    
    <config-modal ref="config" @success="detail" />
    
    <dt-loading :loading="loading" />
	</div>
</template>

<script>
  import paramsItem from './components/params-item.vue'
  import configModal from './components/config-modal.vue'
  import Params from './opt/edit.js'
  import validateMgr from './opt/validate.js'
  import paramsMgr from '@/biz/bonus/params.js'
  
  export default {
    components: {
      paramsItem,
      configModal
    },
    data() {
      return {
        info: {},
        list: [],
        loading: false
      }
    },
    mounted() {
      Promise.all([
        paramsMgr.getPosition(),
        paramsMgr.getChannel(),
        paramsMgr.getProducts()
      ]).then(() => {
        this.detail()
        this.list = new Params(this).options()
      })
    },
    methods: {
      detail() {
        this.loading = true
        paramsMgr.detail().then(res => {
          this.info = { ...res }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      onSave() {
        if (validateMgr.onValidate(this.info)) {
          this.loading = true
          paramsMgr.update(this.info).then(res => {
            this.$Message.success('参数修改成功')
            this.detail()
          }).catch(() => {
            this.loading = false
          })
        }
      },
      onConfig() {
        this.$refs.config.show(this.info)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
  
  .operator {
    margin: 10px 0 20px;
    span {
      margin-right: 30px;
    }
  }
  
  .bottom {
    position: fixed;
    left: 200px;
    right: 0;
    bottom: 0;
    z-index: 9;
    padding: 16px 20px 20px;
    background-color: #fff;
    border-top: 1px solid #eee;
    
    button {
      min-width: 100px;
      margin-right: 20px;
    }
  }
</style>
